<template>
  <div class="home-view">
    <template v-for="item in movieList">
      <MovieListItem
        :key="item.id"
        :item="item"
        @onDetail="onDetail"
      ></MovieListItem>
    </template>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from 'vuex'
import MovieListItem from '../components/MovieListItem.vue'
export default {
  name: 'home',
  components: { MovieListItem },
  data() {
    return {
      params: {
        page: 1,
        size: 20,
      },
    }
  },
  computed: {
    ...mapState(['movieList']),
  },
  mounted() {
    console.log('mounted-home')
  },
  created() {
    console.log('home-----created')
    this.FetchMovieList({ params: this.params })
  },
  activated() {
    // 只有有了keep-alive之后，这个生命周期才能生效
    console.log('activated: home')
  },
  methods: {
    ...mapActions(['FetchMovieList']),
    // 在组件上添加点击事件, 通过.native这个修饰符可以帮助我们实现
    // @click.native=""
    onDetail(item) {
      console.log('inclick')
      this.$router.push(`/detail/${item.id}`)
    },
  },
}
</script>
<style lang="scss">
.home-view {
  display: flex;
  flex-wrap: wrap;
  ul {
    padding: 10px;
    margin: 10px;
    cursor: pointer;
    .movie-name {
      width: 100px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
